AngularJS ng-model Directive
এনজি-মডেল নির্দেশিকা এইচটিএমএল কন্ট্রোলের মান (ইনপুট, সিলেক্ট, টেক্সটেরিয়া) অ্যাপ্লিকেশন ডেটার সাথে আবদ্ধ করে।
দ্রষ্টব্য:
ng-মডেল নির্দেশের সাহায্যে, আপনি AngularJS-এ তৈরি একটি ভেরিয়েবলের সাথে একটি ইনপুট ক্ষেত্রের মান আবদ্ধ করতে পারেন।
একটি মৌলিক উদাহরণ
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>দ্বিমুখী সংযোগ
লিঙ্কটি উভয় দিকে যায়।
যদি ব্যবহারকারী ইনপুট ক্ষেত্রের ভিতরে মান পরিবর্তন করে, তাহলে AngularJS সম্পত্তিও তার মান পরিবর্তন করবে:
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>View → Model
ব্যবহারকারীর ইনপুট পরিবর্তন হলে ডেটা পরিবর্তন হয়
Model → View
তথ্য পরিবর্তনের সাথে সাথে প্রদর্শন স্বয়ংক্রিয়ভাবে আপডেট হয়
দুটি উপায়
উভয় দিকে স্বয়ংক্রিয় সিঙ্ক্রোনাইজেশন
ব্যবহারকারীর ইনপুট যাচাই করুন
ng-মডেল নির্দেশিকা অ্যাপ্লিকেশন ডেটার জন্য টাইপ চেকিং প্রদান করতে পারে (নম্বর, ই-মেইল, প্রয়োজনীয়):
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>উপরের উদাহরণে, এনজি-শো অ্যাট্রিবিউটের এক্সপ্রেশনটি সত্য হলেই স্প্যানটি প্রদর্শিত হয়।
গুরুত্বপূর্ণ:
যদি ng-মডেল অ্যাট্রিবিউটে অ্যাট্রিবিউটটি না থাকে, তাহলে AngularJS আপনার জন্য একটি তৈরি করবে।
আবেদনের অবস্থা
ng-মডেল নির্দেশিকা অ্যাপ্লিকেশন ডেটার জন্য স্ট্যাটাস প্রদান করতে পারে (বৈধ, নোংরা, স্পর্শ করা, ত্রুটি):
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>| অবস্থা | ব্যাখ্যা | মান |
|---|---|---|
| $valid | ইনপুট বৈধ? | true / false |
| $invalid | ইনপুট অবৈধ৷ | true / false |
| $dirty | ব্যবহারকারী মান পরিবর্তন করেছে কিনা | true / false |
| $pristine | এন্ট্রি কি এখনও পরিবর্তন হয়নি? | true / false |
| $touched | মাঠ কি ছুঁয়ে গেছে? | true / false |
| $untouched | মাঠ কি অচ্ছুত? | true / false |
CSS ক্লাস
ng-মডেল নির্দেশিকা তাদের অবস্থানের উপর নির্ভর করে HTML উপাদানগুলির জন্য CSS ক্লাস প্রদান করে:
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>ফর্ম ক্ষেত্রের অবস্থার উপর নির্ভর করে, ng-মডেল নির্দেশিকা নিম্নলিখিত শ্রেণীগুলিকে যোগ/সরিয়ে দেয়:
ng-empty / ng-not-empty
মাঠ খালি থাকুক বা না থাকুক
ng-touched / ng-untouched
মাঠের ছোঁয়া থাকুক বা না থাকুক
ng-valid / ng-invalid
ক্ষেত্রটি বৈধ হোক বা না হোক
ng-dirty / ng-pristine
ক্ষেত্রটি পরিবর্তিত হোক বা না হোক
ng-pending
যাচাইকরণ চলছে
ব্যবহারিক উদাহরণ
ব্যবহারকারীর নাম
<input type="text"
ng-model="user.name"
required>ইমেইল
<input type="email"
ng-model="user.email"
required>নির্বাচনের তালিকা
<select ng-model="user.gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select>পাঠ্য এলাকা
<textarea ng-model="message"
rows="4">
</textarea>